<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width: 400px;
        }
        button {
            width: 70px;
        }
    </style>
	</head>
	<body>
	<div class="box">
        <input type="text"/>
        <button>搜索</button>
       <!-- <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>ccc</li>
       </ul>-->
    </div>

	</body>
	<script>
	//需求： 输入内容，模拟服务器获取内容，创建ul ，并在其中显示
	//输入事件，键盘弹起事件
		     var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
var box = document.getElementsByTagName("div")[0];
var input = document.getElementsByTagName("input")[0];

input.onkeyup = function() {
    // Remove any existing ul element
    var existingUl = document.querySelector("ul");
    if (existingUl) {
        box.removeChild(existingUl);
    }

    // Create a new ul and populate it with matching items
    var newStrArr = [];
    for (var i = 0; i < arr.length; i++) {
        var val = this.value;
        if (arr[i].indexOf(val) === 0 && val) { // Check if value matches and is not empty
            newStrArr.push("<li>" + arr[i] + "</li>");
        }
    }
    
    if (newStrArr.length > 0) { // Only create ul if there are matching items
        var ul = document.createElement("ul");
        ul.innerHTML = newStrArr.join("");
        box.appendChild(ul);

        // Add event listeners to each li
        ul.querySelectorAll("li").forEach(function(li) {
            li.onclick = function() {
                input.value = this.textContent; // Set input value to clicked li content
                box.removeChild(ul); // Remove the ul after selection
            };
        });
    }
};
		   
		   /*
		    * 作业：
		    * 	bug1: 每次输入完后，之前的没有消失
		    *  bug2:  不匹配的时候，也有空白的框
		    * 
		    * 新增功能： 点击下面的搜索出来的li，让ul消失，把选中的li的结果，放到上面input里面去
		    * 	
		    */
	</script>
</html>
